<template>
  <div class="ti_chang">
    <div class="richang_1">
      <div class="header">
        <div class="header_title">
          {{ staticType }} <i class="iconfont icon-zhihuan" @click="handleSwitchStatic"></i>
        </div>
        <income-pay-button @select="handleSelectMoneyType"></income-pay-button>
      </div>
      <histogram class="echart" :x-data="xData" :y-data="yData" ref="riChang"></histogram>
      <div class="footer">
        <div class="footer_text">
          <div>总支出：{{ Number(payTotal).toFixed(2) }}</div>
          <div>总收入：{{ Number(incomeTotal).toFixed(2) }}</div>
        </div>
        <div class="footer_text">
          <div>日均支出：{{ (payTotal / 7).toFixed(2) }}</div>
          <div>日均收入：{{ (incomeTotal / 7).toFixed(2) }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { getBillListForRange } from '@/api/bill'
import Histogram from '@/components/chart/Histogram.vue'
import { handleGetFormatList } from '@/utils/helper'
import dayjs from 'dayjs'
import { computed, defineComponent, onMounted, ref } from 'vue'
import IncomePayButton from './IncomePayButton.vue'
export default defineComponent({
  components: {
    Histogram,
    IncomePayButton
},
  setup() {
    const incomeTotal = computed(() => eval(incomeData.value.join("+"))  )
    const payTotal = computed(() => eval(payData.value.join("+")))
    const xData = ref([])
    const yData = ref([])
    const riChang = ref()
    const  incomeData = ref([])
    const  payData = ref([])
    const moneyTypeIndex = ref('pay')
    const billList = ref([{
      date: '',
      income: 0,
      pay: 0
    }])
    const moneyList = ref([{
      income: 0,
      pay: 0,
      date: ''
    }])
    const staticType = ref('本周统计')
    // 切换支出/收入
    const handleSelectMoneyType = (type: string) => {
      if(type !== moneyTypeIndex.value) {
        moneyTypeIndex.value = type
        yData.value = moneyTypeIndex.value === 'pay' ? payData.value : incomeData.value
        setTimeout(() => {
          riChang.value.init()
        }, 200)
      }
    }
    // 切换本周统计/近7日统计
    const handleSwitchStatic = () => {
      const today = new Date()
      let start
      let end
      if(staticType.value === '本周统计') {
        staticType.value = '近7日统计'
        end = new Date()
        start = new Date(end.getTime() - 86400000 * 6)
      } else {
        staticType.value = '本周统计'
        start = new Date(today.getTime() - (today.getDay() - 1) * 86400000)
        end = new Date(start.getTime() + 6 * 86400000)
      }
      getBillList(start, end)
    }
    // 获取账单列表
    const getBillList = (Start: Date, End: Date) => {
      const start = dayjs(Start).format('YYYY-MM-DD 00:00:00')
      const end = dayjs(End).format('YYYY-MM-DD 23:59:59')
      getBillListForRange({
        start,
        end,
        type: 'day'
      }).then((res) => {
        if(typeof res.code === 'number' && res.code === 100) {
          billList.value = res.data
          handleGetMoneyList(Start, 7)
        }
      })
    }
    // 处理billList中的数据为moneyList
    const handleGetMoneyList = (start: Date, count: number) => {
      moneyList.value = []
      moneyList.value = handleGetFormatList(billList.value, start, count)
      handleGetxyData()
    }
    // 获取收入/支出数据
    const handleGetxyData = () => {
      xData.value = []
      yData.value = []
      incomeData.value = []
      payData.value = []
      for (let i = 0; i < moneyList.value.length; i++) {
        incomeData.value.push(moneyList.value[i].income as never)
        payData.value.push(moneyList.value[i].pay as never)
        xData.value.push(moneyList.value[i].date as never)
      }
      yData.value = moneyTypeIndex.value === 'pay' ? payData.value : incomeData.value
    
      setTimeout(() => {
        riChang.value.init()
      }, 200)
    }
    onMounted(() => {
      handleSwitchStatic()
      handleSwitchStatic()
    })
    return {
      xData,
      yData,
      moneyTypeIndex,
      staticType,
      riChang,
      payTotal,
      incomeTotal,
      handleSelectMoneyType,
      handleSwitchStatic
    }
  }
})
</script>

<style scoped>
  .richang_1 {
    margin: 10px 16px;
    background-color: #fff;
    border-radius: 4px;
    padding: 10px;
  }
  .richang_1 .header {
    display: flex;
    justify-content: space-between;
  }
  .echart {
    height: 300px;
  }
  .footer {
    display: flex;
  }
  .footer_text {
    width: 50%;
    text-align: left;
    font-size: 14px;
  }
</style>